import layout from '../../compute/v1/layout';

import events from '../../compute/v1/events';
import DeskAnimation from '../../compute/v1/deskAnimation';
import { ZRenderComp } from '../../../common/component/zrComp';

import { TitleFrame } from '../x/titleFrame';

class Desk extends ZRenderComp {
	constructor(args) {
		super(args.parent);

		const _layout = layout.desk;
		this.createNewZRenderInstance(_layout.x, _layout.y, _layout.width, _layout.height, 'desk');

		const zrender = this.zrender;
		const zr = this.zr;
		this.getContext().animation = this.animation = new DeskAnimation();
		this.titleFrame = new TitleFrame({
			parent : this, zr, zrender,
			...layout.titleFrame,
			colors : layout.colors,
			zlevel : 20, zlevelStatic : 50,
			titleEventName : events.TITLE_UPDATED
		});
		this.bg = new DeskBackground({ parent : this });

		this.on(events.STYLE_LR_UPDATED, this.onStyleLRUpdated.bind(this));
	}

	init() {
		const { animation } = this;

		import( /* webpackChunkName: "aurora-res/mega_sphere/show/desktop" */ './desktop')
		.then((obj) => {
			this.desktop = new obj.Desktop({ parent : this, animation });
		})
	}

	onStyleLRUpdated() {
		const _layout = layout.desk;
		this.moveTo(_layout.x, _layout.y);
		this.titleFrame.onStyleLRUpdated();
	}
}

class DeskBackground extends ZRenderComp {
	constructor(args) {
		super(args.parent);
		this.useParentZRenderInstance();
	}

	init() {
		this.createImage(this.root.context.assetPath('assets/TheyAlwaysRun-Wreckage.jpg'))
			.position(-980, -layout.bottom.height / 2)
			.opacity(0.3)
			.z(20, 0)
			.build();
	}
}

export { Desk, DeskAnimation };
